<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
        <script>
            $(function(){
                $.ajaxSetup({
                    type:"POST",
                    url:"./abc.php",
                    dataType:"json",
                    success:comment_add
                });
                //添加按钮的单击事件
                $("#btn").click(comment_send);
            });
            
            function comment_send(){
                var vname=$("#input_name").val();
                var vcomment=$("#input_comment").val();
                
                $.ajax({data:{name:vname,comment:vcomment}});
            }
            
            function comment_add(data)
            {
                //更新网页中的某一部分   为tbody元素增加一行
                html="<tr><td>"+data.name+"</td><td>"+data.comment+"</td></tr>";
                $("tbody").append(html);
            }
        </script>
    </head>
    <body>
        <div>Ajax无刷新发表评论</div>
        <ul>
            <li>姓名：<input id="input_name" type="text"/></li><br/>
            <li>评论：<input id="input_comment" type="text"/></li>
        </ul>
        <input id="btn" type="button" value="发表评论"/><br/>
        <table border="1">
            <thead>
            <th>评论者的姓名</th><br/>
            <th>评论者的内容</th>
            </thead>
     <tbody>
        
    </tbody>
        </table>
    
    </body>
</html>
